<template>
	<div class="min-h-screen">
		<header>
			<!-- 顶部横幅 -->
			<div class="banner">
				<div class="banner-bg"></div>
				<div class="banner-content">
					<div class="banner-title">平台赋能 / 数字转型 / 生态重构</div>
					<div class="banner-subtitle">
						ANNUAL SUMMIT OF DIGITAL ARCHITECTURE IN CHINA
					</div>
					<div class="banner-year">2019中国数字建筑年度峰会</div>
				</div>
			</div>
			<!-- 导航栏 -->
			<div class="nav">
				<div class="nav-content">
					<div class="logo">LOGO</div>
					<div class="nav-title">标题</div>
					<ul class="nav-menu">
						<li>首页</li>
						<li>期刊简介</li>
						<li>期刊荣誉</li>
						<li>编委会</li>
						<li>编辑部</li>
						<li>学术不端检测</li>
						<li>开放获取</li>
						<li>期刊订阅</li>
						<li>联系我们</li>
					</ul>
				</div>
			</div>
		</header>
		<main style="background: #eee;" class="max-w-[1440px] mx-auto px-8 py-12">
			<div class="max-w-md mx-auto bg-white rounded-lg shadow-lg p-8">
				<h2 class="text-2xl font-bold text-gray-800 mb-6">作者登录</h2>
				<p class="text-gray-600 mb-8">欢迎回来，请登录您的账户</p>

				<div class="space-y-6">
					<div>
						<label class="block text-sm font-medium text-gray-700 mb-2">邮箱或账号</label>
						<div class="relative">
							<i class="fas fa-envelope absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
							<input type="email"
								class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
								placeholder="请输入邮箱或账号">
						</div>
					</div>
					<div>
						<label class="block text-sm font-medium text-gray-700 mb-2">密码</label>
						<div class="relative">
							<i class="fas fa-lock absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
							<input type="password"
								class="w-full pl-10 pr-12 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
								placeholder="请输入密码">
							<button class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
								@click="togglePassword(this)">
								<i class="fas fa-eye"></i>
							</button>
						</div>
					</div>

					<div class="flex items-center justify-between">
						<label class="flex items-center">
							<input type="checkbox" class="w-4 h-4 text-blue-600">
							<span class="ml-2 text-sm text-gray-600">记住我</span>
						</label>
						<a href="#" class="text-sm text-blue-600 hover:text-blue-800">忘记密码？</a>
					</div>

					<button
						class="w-full bg-blue-600 text-white py-2 px-4 !rounded-button hover:bg-blue-700 transition-colors whitespace-nowrap"
						@click="handleLogin()" style="background: #2563eb;">
						立即登录
					</button>

					<div class="text-center text-sm text-gray-600">
						还没有账户？
						<a href="#" class="text-blue-600 hover:text-blue-800">立即注册</a>
					</div>
				</div>
			</div>
		</main>

		<footer class="bg-gray-100 py-8 mt-12" style="background-color: #3e5eb9;">
			<div class="max-w-[1440px] mx-auto px-8 text-center">
				<p class="text-white text-sm mb-2">
					已接第 384,903 位访问者
				</p>
				<p class="text-white text-sm mb-4">
					机械工程学会 © 2024 版权所有
				</p>
				<p class="text-white text-sm">
					技术支持：南京智慧科技发展有限公司
				</p>
			</div>
		</footer>
	</div>
</template>

<script setup>
	import { useRouter } from 'vue-router'
	const router = useRouter()
	console.log(router)
	
	function togglePassword(button) {
		const input = button.parentElement.querySelector('input');
		const icon = button.querySelector('i');

		if (input.type === 'password') {
			input.type = 'text';
			icon.classList.remove('fa-eye');
			icon.classList.add('fa-eye-slash');
		} else {
			input.type = 'password';
			icon.classList.remove('fa-eye-slash');
			icon.classList.add('fa-eye');
		}
	}

	function handleLogin() {
		const email = document.querySelector('input[type="email"]').value;
		const password = document.querySelector('input[type="password"]').value;
		const rememberMe = document.querySelector('input[type="checkbox"]').checked;

		console.log('Login with:', {
			email: email,
			password: password,
			rememberMe: rememberMe
		});
		router.push('/home') // 直接使用路径字符串
	}
</script>

<style scoped>
	@import url('../style.css');

	.min-h-screen {
		/* min-height: 1024px; */
	}

	input[type="number"]::-webkit-inner-spin-button,
	input[type="number"]::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
</style>